<template>
  <section class="container">
    <!-- :first-name="firstName": 将 firstName 的值作为 first-name prop 传递给 user-data 组件。 -->
    <user-data :first-name="firstName" :last-name="lastName"></user-data>
    <button @click="setAge">Change Age</button>
    <div>
      <input type = "text" placeholder="First Name" v-model="firstName" />
      <!-- ref="lastNameInput" 为 <input> 元素创建了一个引用。-->
      <input type = "text" placeholder="Last Name" ref="lastNameInput"/>
      <button @click="setLastName">Set Name</button>
    </div>
  </section>
</template>

<script>
import {ref,computed,watch,provide} from 'vue';
import UserData from './components/UserData.vue';

export default {
  components:{
    UserData
  },
  setup(){
    //const uName = ref('Maximilian');
    const firstName = ref('');
    const lastName = ref('');
    const lastNameInput = ref(null);
    const uAge = ref(31);

    /*
    provide 函数:
    1.provide 函数允许你向组件树中的后代组件提供数据。
    在这里，你提供了名为 userAge 的值，这个值是由 ref 创建的响应式变量 uAge。
    2.provide 的工作原理:
    当一个组件使用 provide 提供数据时，所有该组件的后代组件都可以通过 inject 来访问这些数据。
    provide 的键值对会在组件实例上被注册为 $provide 对象。
    */
    provide('userAge',uAge);

    const uName = computed(function(){
      return firstName.value+ ' ' + lastName.value;
    });

    watch([uAge,uName],function(newValues,oldValues){
      console.log('Old age: '+ oldValues[0]);
      console.log('New age: '+newValues[0]);
      console.log('Old name: '+ oldValues[1]);
      console.log('New name: '+newValues[1]);
    });


    function setNewAge()
    {
        uAge.value = 32;
    }

    function setLastName(){
      //lastName.value = this.$refs.lastNameInput.value;
      //使用 lastNameInput.value 来获取 DOM 元素
      //注意这里的 value.value 是因为 lastNameInput.value 是一个 ref，
      //所以我们需要访问它的 .value 属性
      lastName.value = lastNameInput.value.value;
    }


    //返回 user 对象和 setNewAge 方法，使得它们可以在模板中使用
    return {
      userName:uName,
      age:uAge, 
      setAge: setNewAge,
      firstName,
      lastName,
      lastNameInput,
      setLastName
    };
  },
};
</script>

<style>
* {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

.container {
  margin: 3rem auto;
  max-width: 30rem;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
  padding: 1rem;
  text-align: center;
}
</style>